<template>
  <div id="LoginPage">
      <div class="center-div">
        <div style="background-color:rgba(0, 110, 255, 0.4);float:left">
          <img id="u700_img" class="img " src="https://img.axureshop.com/d8/35/38/d835380e82d649c599c1fc0782c1bc9f/images/登录界面/u700.svg" style="height:308px">
        </div>
        <el-card style="background-color:rgba(255, 255, 255, 0)">
          <el-tabs :stretch="true">
              <el-tab-pane>
                  <!-- 账号登录 -->
                  <span slot="label"><i class="el-icon-date"></i> 账号登录</span>
                      <div class="formDiv">
                          <el-form :model="loginFormByCodeAndPwd" status-icon ref="loginFormRef" :rules="rules" class="demo-ruleForm">
                          <el-form-item prop="userLoginName">
                              <el-input v-model="loginFormByCodeAndPwd.userLoginName" placeholder="请输入账号">
                              <template slot="prepend">账号：</template>
                              </el-input>
                          </el-form-item>
                          <el-form-item prop="userPassword" type="userPassword">
                          
                              <el-input
                              v-model="loginFormByCodeAndPwd.userPassword"
                              placeholder="请输入密码"
                              type="userPassword"
                              :show-password="true"
                              autocomplete="off">
                              <template slot="prepend">密码：</template>
                              </el-input>
                          </el-form-item>
                          <el-form-item>
                              <el-button style="width: 144px;" @click="resetForm('loginFormRef')">清 空</el-button>
                              <el-button type="primary" style="width: 144px;" @click="loginByCodeAndPwd('loginFormRef')">登 录</el-button>
                          </el-form-item>
                          </el-form>
                      </div>
              </el-tab-pane>
              <!-- <el-tab-pane>
                  <span slot="label"><i class="el-icon-date"></i> 邮箱登录</span>
                  <div class="formDiv">
                      邮箱使用验证码登录
                      <el-form :model="loginFormByEmail" status-icon :rules="loginFormByEmailRules" ref="loginForm" class="demo-ruleForm">
                      <el-form-item prop="customerEmail">
                          <el-input
                          v-model="loginFormByEmail.customerEmail"
                          placeholder="请填写邮箱"
                          autocomplete="off">
                          <template slot="prepend">邮箱：</template>
                          </el-input>
                      </el-form-item>
                      <el-form-item prop="verificationCode">
                          <el-input
                          v-model="loginFormByEmail.verificationCode"
                          placeholder="请填写6位验证码"
                          maxlength="6">
                          <el-button slot="append" @click="sendEmailCode" :disabled="disabled" style="padding:15px;">{{ msg }}</el-button>
                          </el-input>
                      </el-form-item>
                      <el-form-item>
                          <el-button style="width: 160px;" @click="resetForm('loginForm')">清 空</el-button>
                          <el-button
                          type="primary"
                          @click="loginByEmail('loginForm')"
                          :loading="loading"
                          style="width: 160px;margin-left: 20px;">
                          登 录
                          </el-button>
                      </el-form-item>
                      </el-form>
                  </div>
                  </el-tab-pane> -->
              </el-tabs>
            </el-card>
            <p style="color:rgb(146,146,146);font-size: 13px;line-height:10px;margin-top: 260px;margin-left: 250px;">追云原型工作室</p>
              <!-- <div id="register">
                  <div style="float: left"><a @click="toHomePage" style="cursor:pointer;color: #00a6ac;">返回首页</a></div>
                  <div style="float: right;">没有账号？<a @click="toRegisterPage" style="cursor:pointer;color: #00a6ac;">点击注册</a></div>
              </div>
              <input input type="checkbox" v-model="tenDayAutoLoginFlag" >七天内免登录<br> -->
          <!--      <div id="other-login-line">-->
          <!--        <p></p>-->
          <!--        <p>第三方登录</p>-->
          <!--        <p></p>-->
          <!--      </div>-->
      </div>
  </div>
</template>

<script>

export default {
  name: 'LoginPage',
  data () {
    return {
      tenDayAutoLoginFlag: false,
      loginFormByCodeAndPwd: {
        userLoginName: 'admin',
        userPassword: '123456',
        tenDayAutoLoginFlag: ''
      },
      rules: {
        userLoginName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      // disabled: false,
      // msg: '点击获取验证码',
      // count: 60,
      // timer: 0,
      // // 按钮加载
      // loading: false,
      // loginFormByEmail: {
      //   customerEmail: '2193218465@qq.com',
      //   verificationCode: ''
      // },
      // loginFormByEmailRules: { // 规则
      //   customerEmail: [
      //     { required: true, message: '请输入邮箱', trigger: 'blur' },
      //     { validator: checkEmail, message: '请输入争取的邮箱地址', trigger: 'blur' }
      //   ],
      //   verificationCode: [
      //     { required: true, message: '请输入验证码', trigger: 'blur' }
      //   ]
      // }
    }
  },
  mounted () {

  },
  methods: {
  // 根据账号密码登录
    loginByCodeAndPwd (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sysUser/login', this.loginFormByCodeAndPwd).then((result) => {
            if (result.data.flag) {
              // debugger
              this.myMessage('success', '登录成功')
              setTimeout(() => {
                debugger
                window.sessionStorage.setItem('token', result.data.data.token)
                window.sessionStorage.setItem('userLoginName', result.data.data.userLoginName) // 员工账号
                window.sessionStorage.setItem('id', result.data.data.id) // 员工id
                // window.sessionStorage.setItem('customerNickName', result.data.obj.customerNickName) // 员工名称
                // window.sessionStorage.setItem('customerPhone', result.data.obj.customerPhone) // 员工手机号
                // window.sessionStorage.setItem('onboardTime', result.data.obj.onboardTime) // 入职时间
                // window.sessionStorage.setItem('age', result.data.obj.age) // t员工年龄
                // window.sessionStorage.setItem('sex', result.data.obj.sex) // 员工性别
                // window.sessionStorage.setItem('gl', result.data.obj.gl)
                // window.sessionStorage.setItem('Cookie', result.data.obj.Cookie)
                this.$router.push('/home')// 登录成功
              }, 500)
            } else {
              this.myMessage('error', result.data.obj)
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    // 跳转注册页面
    toRegisterPage () {
      this.$router.push('/register')
    },
    // 跳转首页
    toHomePage () {
      this.$router.push('/')
    },
    // 发送邮箱验证码
    sendEmailCode () {
      debugger
      this.$refs.loginForm.validateField('customerEmail', result => {
        if (!result) {
        // 按钮倒计时
          this.disabled = true
          this.msg = this.count-- + 's后重新获取'
          this.timer = setInterval(() => {
            this.msg = this.count-- + 's后重新获取'
            if (this.count < 0) {
              this.msg = '点击获取验证码'
              this.count = 60
              this.disabled = false
              clearInterval(this.timer)
            }
          }, 1000)
        }
        // 发送验证码请求
        const formData = new FormData()
        formData.set('customerEmail', this.loginFormByEmail.customerEmail)
        // 权限码请求接口
        this.$axios.post('/email/sendEmailCode', formData).then((result) => {
          if (result.data.flag) {
            this.$notify({
              title: '邮箱验证码已发送',
              message: '验证码有效时长5分钟, 失效请重新发送',
              type: 'success',
              duration: 10 * 1000
            })
          } else {
            this.myMessage('warning', result.data.obj)
          }
        }).catch((err) => {
          console.log(err)
          this.myMessage('error', '发送失败！请联系管理员')
        })
      })
    },
    // 清空内容
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    myMessage (type, message) { // 弹窗提示
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style scoped="scoped">
#LoginPage {
width: 100%;
height: 100%;
background: url("https://img.axureshop.com/d8/35/38/d835380e82d649c599c1fc0782c1bc9f/images/登录界面/u664_state0.svg") no-repeat center center;
background-size: 100%;
margin: auto;
}
.center-div{
  width:604px;
  height: 400px;
  background: rgba(255,255,255, .0);
  position: absolute;
  top: 60%;
  right:30%;
  margin-top: -250px;
  box-sizing: border-box;
}
::v-deep .el-tabs__item {
  height:50px;
  line-height: 50px;
}
.formDiv{
  width:100%;
  padding: 20px 30px 0;
  box-sizing: border-box;
}
#other-login-line{
  position: relative;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  margin-bottom: 26px;
  box-sizing: border-box;
}
#other-login-line p:nth-child(1){
  position: absolute;
  left: 24px;
  top: -1px;
  transform: translate(0,-50%);
  height: 1px;
  width: 125px;
  background-color: #b8b8b8;
}
#other-login-line p:nth-child(2) {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#other-login-line p:nth-child(3) {
  position: absolute;
  right: 24px;
  top: -1px;
  transform: translate(0,-50%);
  height: 1px;
  width: 125px;
  background-color: #b8b8b8;
}
::v-deep .el-form-item__error {
  left: 85px;
}
#register{
  margin: 0 30px;
  font-size: 14px;
}
</style>
